<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="${cxt}/resources/layui/css/layui.css"/>
</head>
<body>
	<div style="width: 1040px;margin: auto;margin-top: 15px;">
		<div class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label" for="realName">用户姓名</label>
					<div class="layui-input-inline">
						<input class="layui-input" id="realName" placeholder="用户姓名">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label" for="phone">手机号</label>
					<div class="layui-input-inline">
						<input class="layui-input" id="phone" placeholder="手机号">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">用户类型</label>
					<div class="layui-input-inline">
						<select id="type">
							<option value="">请选择用户类型</option>
							<option value="1">超级管理员</option>
							<option value="2">系统用户</option>
						</select>
					</div>
				</div>
				<button id="searchBtn" class="layui-btn" style="margin-top: -6px;">搜 索</button>
			</div>
		</div>
	</div>
	<div>
		<table id="dataTable" lay-filter="dataTableFilter"></table>
	</div>
	
	<script type="text/html" id="rowBtns">
		<button lay-event="restPwd" class="layui-btn layui-btn-sm layui-btn-warm">重置密码</button>
	</script>
	<script type="text/javascript" src="${cxt}/resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use(['form','table','jquery','layer'],function(){
			var form = layui.form;
			var $ = layui.jquery;
			var table = layui.table;
			var layer = layui.layer;
			//初始化table
			var t = table.render({
				id:'dataTableId',
				elem:"#dataTable",
				url:"${cxt}/sys/user/list.do",
				page:true,
				height:"400px",
				cols:[[
					{type:'checkbox'},
					{field:'id',title:'用户ID',width:'75'},
					{field:'loginName',title:'用户名',width:'100'},
					{field:'idCard',title:'身份证',width:'175'},
					{field:'realName',title:'姓名',width:'100'},
					{field:'sex',width:'80',title:'性别',templet:function(d){
							if(d.sex == 1){
								return "男";
							}else if(d.sex == 2){
								return "女";
							}
						},
					},
					{field:"address",title:"地址",width:'170'},
					{field:"phone",title:"手机号",width:'120'},
					{field:"position",title:"职位",width:'100'},
					{field:"type",title:"用户类型",width:'120',templet:function(d){
							if(d.type == 1){
								return "超级管理员";
							}else if(d.type == 2){
								return "系统用户";
							}
						}
					},
					{title:"操作",width:'130',toolbar:"#rowBtns",fixed:"right"},
				]],
				parseData:function(rs){
					if(rs.code == 200){
						return {
						      "code": rs.code, //解析接口状态
						      "msg": rs.msg, //解析提示文本
						      "count": rs.data.count, //解析数据长度
						      "data": rs.data.data //解析数据列表
						    };
					}
				},
				response: {
					statusCode: 200  //规定成功的状态码，默认：0
				} 
			});
			//  搜索功能
			$("#searchBtn").click(function(){
				var realName = $("#realName").val();
				var phone = $("#phone").val();
				var type = $("#type").val();
				t.reload({
					where:{
						'realName':realName,
						'phone':phone,
						'type':type
					}
				});
			});
		});
	</script>
</body>
</html>